<!-- 登录 -->
<template>
  <div class="login">
    <img src="../../assets/loginBg.png" alt="" width="100%">
    <!-- 登陆 -->
    <div style="overflow: auto;" v-if="tab == 'login'">
      <div class="lpanel" :class="{active: tab === 'login'}">
        <div class="lrow">
          <!-- <label>用户名</label> -->
          <div class="right-icon" style="margin-left: 65px;position: relative;">
            <div style="position: absolute;z-index: 88;left: -62px; height: 34px;border-bottom: 1px solid #efefef;width: 50px;line-height: 34px;font-size: 13px;">
              <img src="../../assets/d_icon1@2x.png" alt="" style="height: 14px;vertical-align: middle; margin-top: -3px;">
              <span>+ 86</span>
            </div>
            <input type="text" v-model="login.username" style="font-size: 14px;width: 96%;" placeholder="手机号">
            <!-- <img src="/static/images/common/input_right.png" alt="" class="textIcon" v-show="login.username"> -->
          </div>
        </div>
        <div class="lrow">
          <!-- <label>密码</label> -->
          <div class="right-icon" style="position: relative;">
            <img src="../../assets/d_icon3@2x.png" alt="" style="width: 12px;position: absolute;z-index: 88;top: 9px;left: 5px;">
            <input type="password" v-model="login.password" @keydown="setPassword()" style="font-size: 14px;padding-left: 25px;" placeholder="输入密码">
            <!-- <img src="/static/images/common/input_right.png" alt="" class="textIcon" v-show="login.password"> -->
          </div>
        </div>
        <div class="btnrow" @click="userLogin">
          登&nbsp;&nbsp;录
        </div>
        <div class="pwdrow">
          <span class="left" @click="savePassWord" style="color: #999;font-size: 13px;">
            <i :class="{activeBg: login.savepwd}"></i>记住密码
          </span>
          <span @click="$router.push({ path: '/forgetPwd' })" style="color: #999;font-size: 13px;">忘记密码？</span>
        </div>
        <div style="text-align: center;font-size: 15px;margin-top: 10px;">
          <span style="color: #666">还没有账号,</span>
          <span style="color: #207ce3" @click="tab='register'">请注册</span>
        </div>
      </div>
    </div>
    <!-- 注册 -->
    <div style="overflow: auto;" v-if="tab == 'register'">
      <div class="lpanel register" :class="{active: tab === 'register'}">
        <div class="lrow">
          <!-- <label>用户名</label> -->
          <div class="right-icon" style="margin-left: 65px;position: relative;">
            <div style="position: absolute;z-index: 88;left: -62px; height: 34px;border-bottom: 1px solid #efefef;width: 50px;line-height: 34px;font-size: 13px;">
              <img src="../../assets/d_icon1@2x.png" alt="" style="height: 14px;vertical-align: middle; margin-top: -3px;">
              <span>+ 86</span>
            </div>
            <input type="text" v-model="register.username" placeholder="手机号" style="font-size: 14px;width: 96%;">
            <!-- <img src="/static/images/common/input_right.png" alt="" class="textIcon" v-show="register.username"> -->
          </div>
        </div>
        <div class="lrow">
          <!-- <label>验证码</label> -->
          <div class="right-verify" style="position: relative;">
            <img src="../../assets/d_icon2@2x.png" alt="" style="width: 9px;position: absolute;z-index: 88;top: 9px;left: 7px;">
            <input type="text" v-model="register.smscode" placeholder="校验码" style="font-size: 14px;padding-left: 25px;">
            <button class="verify removeDefault" @click="getVerify" :disabled="isDisabled">{{verificationCode}}</button>
          </div>
        </div>
        <div class="lrow">
          <!-- <label>密码</label> -->
          <div class="right-icon" style="position: relative;">
            <img src="../../assets/d_icon3@2x.png" alt="" style="width: 12px;position: absolute;z-index: 88;top: 9px;left: 5px;">
            <input type="password" v-model="register.password" placeholder="设置密码" style="font-size: 14px;padding-left: 25px;">
            <!-- <img src="/static/images/common/input_right.png" alt="" class="textIcon" v-show="register.password"> -->
          </div>
        </div>
        <div class="lrow">
          <!-- <label>确认密码</label> -->
          <div class="right-icon" style="position: relative;">
            <img src="../../assets/d_icon3@2x.png" alt="" style="width: 12px;position: absolute;z-index: 88;top: 9px;left: 5px;">
            <input type="password" v-model="register.passwordConfirm" placeholder="再次确认" style="font-size: 14px;padding-left: 25px;">
            <!-- <img src="/static/images/common/input_right.png" alt="" class="textIcon" v-show="register.passwordConfirm"> -->
          </div>
        </div>
        <div class="lrow">
          <!-- <label>邀请人（没有可不填）</label> -->
          <div class="right-icon">
            <img src="../../assets/d_icon4@2x.png" alt="" style="width: 15px;position: absolute;z-index: 88;top: 9px;left: 5px;">
            <input type="text" v-model="register.inviteid" placeholder="邀请人" style="font-size: 14px;padding-left: 25px;" :readonly='isreadonly'>
            <!-- <img src="/static/images/common/input_right.png" alt="" class="textIcon" v-show="register.inviteid"> -->
          </div>
        </div>
        <div class="btnrow" @click="userRegister">
          注&nbsp;&nbsp;册
        </div>
        <div style="text-align: center;font-size: 15px;margin-top: 10px;">
          <span style="color: #666">已有账号,</span>
          <span style="color: #207ce3" @click="tab='login'">请登录</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    login,
    register,
    sms
  } from '../../service/user'
  import tips from '../../service/tips'
  import http from '../../service/http'
  import util from '../../service/util'
  export default {
    data() {
      return {
        tab: 'login',
        verificationCode: '获取验证码',
        countDown: 60,
        isDisabled: false,
        login: { // 登陆
          username: '',
          password: '',
          savepwd: false
        },
        isreadonly: false,
        register: {
          username: '',
          password: '',
          passwordConfirm: '',
          smscode: '',
          inviteid: ''
        },
      }
    },
    created() {
      const loginUsername = util.getItem('login.username');
      const loginPassword = util.getItem('login.password');
      this.login.username = loginUsername;
      this.register.inviteid = this.$route.query.username;
      if (this.$route.query.username) {
        this.isreadonly = true;
      }
      if (this.register.inviteid || this.$route.query.type) {
        this.tab = 'register'
      }
      if (loginPassword) {
        this.login.password = loginPassword
        this.login.savepwd = true
      }
      // 判断是pc还是h5
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if ((isAndroid || isiOS) && this.$route.query.username) { //手机端
         window.location='http://app.bit000.com/#/login?username='+this.$route.query.username;
      } else if (this.$route.query.username) {
        window.location = 'https://www.bit000.com/#/page/regist?username=' + this.$route.query.username;
      }
    },
    methods: {
      setPassword() {
        if (this.login.savepwd) {
          util.setItem("login.password", this.login.password)
        } else {
          util.removeItem('this.login.password')
        }
      },
      // 登录
      async userLogin() {
        if (this.login.savepwd) {
          util.setItem("login.password", this.login.password.trim())
        } else {
          util.removeItem('this.login.password')
        }
        if (!this.login.username) {
          tips.tips("请输入用户名");
          return false;
        }
        if (!this.login.password) {
          tips.tips("请输入密码");
          return false;
        }
        http.post("/user/login", {
          username: this.login.username.trim(),
          // password: util.getItem('login.password') ? util.md5(this.login.password) : this.login.password
          password: util.md5(this.login.password).trim(),
        }).then((res) => {
          if (res.data.status == 200) {
            window.localStorage.setItem("Authorization", res.data.token);
            window.localStorage.setItem("login.username", this.login.username.trim());
            this.$router.push({
              path: "/main/home"
            })
          } else {
            tips.tips(res.data.msg)
          }
        }).catch((res) => {
          tips.tips(res.msg)
        })
      },
      // 注册
      async userRegister() {
        if (!this.register.username) {
          tips.tips("请输入用户名");
          return false;
        }
        if (!this.register.smscode) {
          tips.tips("请输入验证码");
          return false;
        }
        if (!this.register.password) {
          tips.tips("请输入密码");
          return false;
        }
        if (!this.register.passwordConfirm) {
          tips.tips("请输入确认密码");
          return false;
        }
        const info = await register({
          username: this.register.username,
          password: util.md5(this.register.password),
          passwordConfirm: util.md5(this.register.passwordConfirm),
          smscode: this.register.smscode,
          inviteid: this.register.inviteid
        })
        if (info.status === 200) {
          // alert(info.msg)
          // 存储用户名、token
          this.$store.username = info.username
          this.$store.token = info.token

          tips.tips(info.msg)
        } else {
          tips.tips(info.msg)
        }
      },
      // 获取验证码
      async getVerify() {
        if (!this.register.username) {
          tips.tips("请输入用户名");
          return false;
        }
        this.countDown = 60;
        this.verificationCode = this.countDown + "s";
        var timer = setInterval(() => {
          this.countDown--;
          this.isDisabled = true;
          if (this.countDown <= 1) {
            this.isDisabled = false;
            this.countDown = '再次获取';
            clearInterval(timer);
          }
          if (this.countDown >= 0) {
            this.verificationCode = this.countDown + "s";
          } else {
            this.verificationCode = this.countDown
          }
        }, 1000)

        const info = await sms({
          username: this.register.username
        })
        if (info.status === 200) {
          tips.tips(info.msg)
        } else {
          tips.tips(info.msg)
        }
      },
      // 记住密码
      savePassWord() {
        this.login.savepwd = !this.login.savepwd
        if (!this.login.savepwd) { // 不保存密码
          util.removeItem('this.login.password')
        } else {
          util.setItem('login.password', this.login.password)
        }
      }
    },
    components: {

    },
  }
</script>

<style lang="less">
  /* @import "../../../static/styles/login"; */

  .right-icon input,
  .right-verify input {
    border: none;
    outline: none;
  }

  .textIcon {
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
  }

  .removeDefault {
    border: none;
    outline: none;
    width: 91px;
    text-align: center;
    display: block;
  }

  .activeBg {
    background: #999;
  }

  .lpanel.register {
    height: 300px;
  }

  .lpanel.register .right-verify {
    position: relative;
  }

  .lpanel.register .right-verify .verify {
    display: block;
    position: absolute;
    color: #ffffff;
    font-size: 14px;
    padding: 0.2rem .5rem;
    right: 0.57rem;
    top: 0.57rem;
    z-index: 1;
    color: #FEA620;
    border-radius: 4px;
    background: none;
    margin-top: -5px;
  }

  .lpanel.register .btnrow {
    margin-top: 30px;
  }

  .lpanel.register .lrow label {
    margin-bottom: 0;
  }

  .lpanel.register .lrow input {
    font-size: 1.14rem;
  }

  .lpanel.register .lrow+.lrow {
    margin-top: 20px;
  }

  .lpanel {
    display: none;
    background-color: #ffffff;
    height: 250px;
    padding: 15px;
    margin-bottom: 50px;
  }

  .lpanel.active {
    display: block;
  }

  .lpanel .btnrow {
    height: 40px;
    line-height: 40px;
    color: #ffffff;
    width: 90%;
    margin: 40px auto 0 auto;
    text-align: center;
    background-image: linear-gradient(-135deg, #FEDF33 0%, #FE9D09 100%);
    /* box-shadow: 2px 2px 5px 2px rgba(198, 198, 198, 0.5); */
    border-radius: 25px;
  }

  .lpanel .pwdrow {
    margin-top: 25px;
    color: #FEA620;
    font-size: 0.92rem;
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
  }

  .lpanel .pwdrow .left i {
    border: 1px solid #999;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }

  .lpanel .pwdrow .left i.active {
    background-color: #ff9a0061;
  }

  .lpanel .lrow+.lrow {
    margin-top: 10px;
  }

  .lpanel .lrow .right-icon {
    position: relative;
  }

  .lpanel .lrow .right-icon:after {
    display: block;
    width: 32px;
    height: 32px;
    content: '';
    position: absolute;
    /* background: url(../../../static/images/common/input_right.png) no-repeat center; */
    background-size: 100% 100%;
    top: 0.5rem;
    right: 0.57rem;
  }

  .lpanel .lrow label {
    font-size: 0.92rem;
    display: block;
    color: #666666;
  }

  .lpanel .lrow input {
    padding: 0.57rem 0.35rem;
    border: 0;
    width: 92%;
    box-shadow: 0 1px 0 0px #EFEFEF;
    font-size: 1.42rem;
    position: relative;
  }

  /* .lpanel .lrow input:focus {
    box-shadow: 0 2px 0 0px #30DA51;
  } */

  .tab {
    margin-top: 30px;
    text-align: center;
  }

  .tab span {
    display: inline-block;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.28rem;
    border-bottom: 2px solid transparent;
    padding: 0.71rem 1rem;
  }

  .tab span.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
  }

  .tab span+span {
    margin-left: 10px;
  }

  .top {
    font-size: 1.85rem;
    color: #ffffff;
    text-align: center;
    margin-top: 50px;
  }

  .login {
    overflow: hidden;
    width: 100vw;
    min-height: 100vh;
    background-color: #fff;
    position: relative;
    z-index: 1;
  }

  /* .login:after {
    display: block;
    content: '';
    width: 140vw;
    height: 248px;
    background-image: linear-gradient(-135deg, #FEDF33 0%, #FE9D09 100%);
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -70vw;
    border-radius: 0 0 50% 50%;
    z-index: -1;
  } */

  .right-icon input {
    outline: none;
    border: none;
  }

  /*# sourceMappingURL=login.css.map */
</style>